<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" type="text/css" href="../web-lib/css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>

<header class="top-part">
	<div class="top-part-left">
		<span class="iconfont icon-xuanxiang1"></span>
	</div>
	<div class="top-part-mid">
		<span class="iconfont icon-yinyue"></span>
		<span class="iconfont icon-yinyue2"></span>
		<span class="iconfont icon-yonghu"></span>
	</div>
	<div class="top-part-right">
		<span class="iconfont icon-fangdajing"></span>
	</div>
</header>

<section class="playsel-part">
	<div class="playsel-item">
		<div class="item-logo">
			<span class="iconfont icon-yinyue"></span>
		</div>
		<div class="item-mess">
			<span class="item-mess-name">我的音乐</span>
			<span class="item-mess-num">(28)</span>
		</div>
	</div>
	<div class="playsel-item">
		<div class="item-logo">
			<span class="iconfont icon-bofang"></span>
		</div>
		<div class="item-mess">
			<span class="item-mess-name">最近播放</span>
			<span class="item-mess-num">(28)</span>
		</div>
	</div>
	<div class="playsel-item">
		<div class="item-logo">
			<span class="iconfont icon-yinyue"></span>
		</div>
		<div class="item-mess">
			<span class="item-mess-name">我的电台</span>
			<span class="item-mess-num">(28)</span>
		</div>
	</div>
	<div class="playsel-item">
		<div class="item-logo">
			<span class="iconfont icon-shoucang"></span>
		</div>
		<div class="item-mess">
			<span class="item-mess-name">我的收藏</span>
			<span class="item-mess-num">(28)</span>
		</div>
	</div>
</section>

<section class="playall-part">
	<div class="playall-item">
		<h6>
			<span class="insert-xiabiao"></span>我创建的歌单
			<span class="iconfont icon-shezhi"></span>
		</h6>
		<div class="playall-item-content">
			<div class="playall-item-list">
				<div class="item-list-logo">
					<img src="img/music_far away.jpg">
				</div>
				<div class="item-list-mess">
					<p>我喜欢的音乐</p>
					<p><span>30</span>首歌曲</p>
					<span class="iconfont icon-xuanxiang2"></span>
				</div>
			</div>
			<div class="playall-item-list">
				<div class="item-list-logo">
					<img src="img/music_far away.jpg">
				</div>
				<div class="item-list-mess">
					<p>我喜欢的音乐</p>
					<p><span>30</span>首歌曲</p>
					<span class="iconfont icon-xuanxiang2"></span>
				</div>
			</div>
			<div class="playall-item-list">
				<div class="item-list-logo">
					<img src="img/music_far away.jpg">
				</div>
				<div class="item-list-mess">
					<p>我喜欢的音乐</p>
					<p><span>30</span>首歌曲</p>
					<span class="iconfont icon-xuanxiang2"></span>
				</div>
			</div>
		</div>
	</div>
	<div class="playall-item">
		<h6>
			<span class="insert-xiabiao"></span>我创建的歌单
			<span class="iconfont icon-shezhi"></span>
		</h6>
		<div class="playall-item-content">
			<div class="playall-item-list">
				<div class="item-list-logo">
					<img src="img/music_far away.jpg">
				</div>
				<div class="item-list-mess">
					<p>我喜欢的音乐</p>
					<p><span>30</span>首歌曲</p>
					<span class="iconfont icon-xuanxiang2"></span>
				</div>
			</div>
			<div class="playall-item-list">
				<div class="item-list-logo">
					<img src="img/music_far away.jpg">
				</div>
				<div class="item-list-mess">
					<p>我喜欢的音乐</p>
					<p><span>30</span>首歌曲</p>
					<span class="iconfont icon-xuanxiang2"></span>
				</div>
			</div>
			<div class="playall-item-list">
				<div class="item-list-logo">
					<img src="img/music_far away.jpg">
				</div>
				<div class="item-list-mess">
					<p>我喜欢的音乐</p>
					<p><span>30</span>首歌曲</p>
					<span class="iconfont icon-xuanxiang2"></span>
				</div>
			</div>
		</div>
	</div>
</section>


<div class="playbot">
	<div class="playbot-left">
		<div class="playbot-left-img">
			<img src="img/jj.jpg">
		</div>
		<div class="playbot-left-mess">
			<span>小酒窝</span>
			<p>林俊杰,蔡卓妍</p>
		</div>
	</div>
	<div class="playbot-right">
		<span class="iconfont icon-bofang"></span>
		<span class="iconfont icon-xuanxiang1"></span>
	</div>
</div>



</body>
</html>